<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>考勤签到</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css"/>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=BIMkrVrXh34doklbzbUpxEpZvb7zNOtS"
            type="text/javascript"></script>
</head>
<body>
<div class="page">

    <div class="page__bd">

        <div id="map_container" style="width: 100%;height: 360px"></div>


        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="btn_submit">打 卡</a>
        </div>

        <div style="font-size: 10px;color: #999; padding: 16px">
            <?php if ($first_record != null): ?>
                <p>今日首次有效打卡：<?= $first_record->ts ?></p>
            <?php endif; ?>

            <?php if ($last_record != null): ?>
                <p>今日末次有效打卡：<?= $last_record->ts ?></p>
            <?php endif; ?>
        </div>
    </div>


    <div style="display: none;" id="dialog_alert">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
            <div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
            </div>
        </div>
    </div>

    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
</div>

</div>
</body>
<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var current_lng = 0.0;
    var current_lat = 0.0;
    var convertor = new BMap.Convertor();
    var map = new BMap.Map("map_container");          // 创建地图实例
    var marker = undefined;
    var point = new BMap.Point(120.314083, 30.420003);  // 创建点坐标
    map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别

    var translateCallback = function (data) {
        if (data.status === 0) {

            map.setCenter(data.points[0]);

            current_lng = data.points[0].lng;
            current_lat = data.points[0].lat;

            if (marker == undefined) {
                marker = new BMap.Marker(data.points[0]);
                map.addOverlay(marker);

                var label = new BMap.Label("", {offset: new BMap.Size(20, -10)});
                marker.setLabel(label); //添加百度label
            }
            else {
                marker.setPosition(data.points[0]);
            }


            var geoc = new BMap.Geocoder();

            geoc.getLocation(data.points[0], function (rs) {
                var addComp = rs.addressComponents;
                var label = marker.getLabel();
                label.setContent(addComp.district + addComp.street + addComp.streetNumber);
            });
        }
    };


    var currUrl = window.location.href.replace(window.location.hash, '');
    $.getJSON('/wx/signature?url=' + encodeURIComponent(currUrl)).done(function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'getLocation'
            ]
        });
    }).error(function (a) {

    });


    var location_func = function () {
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var ggPoint = new BMap.Point(longitude, latitude);  //创建点坐标
                var pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, translateCallback);
            }
        });
    };

    wx.ready(function () {
        location_func();

        setInterval(function () {
            location_func();
        }, 15000);

        $("#btn_submit").click(function () {

            if (current_lng == 0 || current_lat == 0) {
                $("#dialog_alert .weui-dialog__title").text("警告");
                $("#dialog_alert .weui-dialog__bd").text("获取位置失败，请开启定位功能");
                $("#dialog_alert").fadeIn(200);
                return;
            }

            $.post("/wx/position",
                {lng: current_lng, lat: current_lat},
                function (data) {
                    if (data["code"] == 200) {
                        var msg = '';
                        if (data["message"].length > 0 ){
                            msg = "【" + data["message"] + "】打卡成功";
                        }
                        else {
                            msg = "打卡位置不在指定工作区域，如有特殊情况请联系管理员";
                        }
                        $("#dialog_alert .weui-dialog__title").text("提示");
                        $("#dialog_alert .weui-dialog__bd").text(msg);
                        $("#dialog_alert").fadeIn(200);
                    }
                    else {
                        $("#dialog_alert .weui-dialog__title").text("警告");
                        $("#dialog_alert .weui-dialog__bd").text("打卡失败，请重试");
                        $("#dialog_alert").fadeIn(200);
                    }
                }
            );
        });


    });

    $('#dialog_alert .weui-dialog__btn').click(function () {
        $("#dialog_alert").fadeOut(200);
        location.reload();
    });
</script>
</html>